<template>
  <div class="system-settings-container">
    <!-- 页面标题 -->
    <div class="page-header mb-6">
      <h1 class="text-2xl font-bold text-gray-800">系统设置</h1>
      <p class="text-gray-500 mt-1">配置系统参数、安全选项和其他全局设置</p>
    </div>

    <!-- 配置选项卡 -->
    <div class="bg-white rounded-lg shadow-sm overflow-hidden">
      <!-- 选项卡导航 -->
      <div class="border-b border-gray-200">
        <nav class="-mb-px flex">
          <button
            v-for="tab in tabs"
            :key="tab.id"
            :class="[
              'py-4 px-6 border-b-2 text-sm font-medium',
              activeTab === tab.id 
                ? 'border-indigo-500 text-indigo-600' 
                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
            ]"
            @click="activeTab = tab.id"
          >
            <i :class="tab.icon" class="mr-2"></i>
            {{ tab.name }}
          </button>
        </nav>
      </div>

      <!-- 选项卡内容 -->
      <div class="p-6">
        <!-- 基本设置 -->
        <div v-if="activeTab === 'basic'">
          <h2 class="text-lg font-semibold text-gray-900 mb-4">基本设置</h2>
          <p class="text-gray-500 mb-6">配置系统名称、显示选项和其他基础参数</p>
          
          <form @submit.prevent="saveSettings('basic')">
            <div class="space-y-6">
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">系统名称</label>
                  <input
                    v-model="settings.basic.systemName"
                    type="text"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                    placeholder="输入系统名称"
                  >
                </div>
                
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">系统版本</label>
                  <input
                    v-model="settings.basic.version"
                    type="text"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-gray-50"
                    readonly
                  >
                </div>
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">系统描述</label>
                <textarea
                  v-model="settings.basic.description"
                  rows="3"
                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                  placeholder="输入系统描述信息"
                ></textarea>
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-3">默认语言</label>
                <div class="flex flex-wrap gap-4">
                  <label class="inline-flex items-center">
                    <input
                      v-model="settings.basic.defaultLanguage"
                      type="radio"
                      name="language"
                      value="zh-CN"
                      class="text-indigo-600 focus:ring-indigo-500"
                    >
                    <span class="ml-2">简体中文</span>
                  </label>
                  <label class="inline-flex items-center">
                    <input
                      v-model="settings.basic.defaultLanguage"
                      type="radio"
                      name="language"
                      value="en-US"
                      class="text-indigo-600 focus:ring-indigo-500"
                    >
                    <span class="ml-2">English</span>
                  </label>
                  <label class="inline-flex items-center">
                    <input
                      v-model="settings.basic.defaultLanguage"
                      type="radio"
                      name="language"
                      value="ja-JP"
                      class="text-indigo-600 focus:ring-indigo-500"
                    >
                    <span class="ml-2">日本語</span>
                  </label>
                </div>
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-3">日期格式</label>
                <select
                  v-model="settings.basic.dateFormat"
                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                >
                  <option value="YYYY-MM-DD">YYYY-MM-DD (2023-12-31)</option>
                  <option value="MM/DD/YYYY">MM/DD/YYYY (12/31/2023)</option>
                  <option value="DD/MM/YYYY">DD/MM/YYYY (31/12/2023)</option>
                </select>
              </div>
              
              <div>
                <label class="flex items-center">
                  <input
                    v-model="settings.basic.showWelcomeMessage"
                    type="checkbox"
                    class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                  >
                  <span class="ml-2 block text-sm text-gray-700">登录时显示欢迎信息</span>
                </label>
              </div>
            </div>
            
            <div class="mt-8 flex justify-end">
              <button
                type="button"
                class="mr-3 px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                @click="resetSettings('basic')"
              >
                重置
              </button>
              <button
                type="submit"
                class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
              >
                保存设置
              </button>
            </div>
          </form>
        </div>
        
        <!-- 安全设置 -->
        <div v-if="activeTab === 'security'">
          <h2 class="text-lg font-semibold text-gray-900 mb-4">安全设置</h2>
          <p class="text-gray-500 mb-6">配置密码策略、登录限制和其他安全相关选项</p>
          
          <form @submit.prevent="saveSettings('security')">
            <div class="space-y-6">
              <div>
                <h3 class="text-md font-medium text-gray-900 mb-3">密码策略</h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">最小密码长度</label>
                    <input
                      v-model.number="settings.security.passwordPolicy.minLength"
                      type="number"
                      min="6"
                      max="32"
                      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                    >
                  </div>
                  
                  <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">密码有效期 (天)</label>
                    <input
                      v-model.number="settings.security.passwordPolicy.expireDays"
                      type="number"
                      min="0"
                      max="365"
                      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                    >
                    <p class="mt-1 text-xs text-gray-500">设置为0表示密码永不过期</p>
                  </div>
                </div>
                
                <div class="mt-4 space-y-3">
                  <label class="flex items-center">
                    <input
                      v-model="settings.security.passwordPolicy.requireUppercase"
                      type="checkbox"
                      class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                    >
                    <span class="ml-2 block text-sm text-gray-700">要求包含大写字母 (A-Z)</span>
                  </label>
                  
                  <label class="flex items-center">
                    <input
                      v-model="settings.security.passwordPolicy.requireLowercase"
                      type="checkbox"
                      class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                    >
                    <span class="ml-2 block text-sm text-gray-700">要求包含小写字母 (a-z)</span>
                  </label>
                  
                  <label class="flex items-center">
                    <input
                      v-model="settings.security.passwordPolicy.requireNumber"
                      type="checkbox"
                      class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                    >
                    <span class="ml-2 block text-sm text-gray-700">要求包含数字 (0-9)</span>
                  </label>
                  
                  <label class="flex items-center">
                    <input
                      v-model="settings.security.passwordPolicy.requireSpecialChar"
                      type="checkbox"
                      class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                    >
                    <span class="ml-2 block text-sm text-gray-700">要求包含特殊字符 (!@#$%等)</span>
                  </label>
                </div>
              </div>
              
              <div class="pt-4 border-t border-gray-200">
                <h3 class="text-md font-medium text-gray-900 mb-3">登录安全</h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">最大失败登录次数</label>
                    <input
                      v-model.number="settings.security.login.maxFailedAttempts"
                      type="number"
                      min="1"
                      max="10"
                      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                    >
                  </div>
                  
                  <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">账号锁定时间 (分钟)</label>
                    <input
                      v-model.number="settings.security.login.lockoutMinutes"
                      type="number"
                      min="5"
                      max="1440"
                      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                    >
                  </div>
                </div>
                
                <div class="mt-4 space-y-3">
                  <label class="flex items-center">
                    <input
                      v-model="settings.security.login.enableCaptcha"
                      type="checkbox"
                      class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                    >
                    <span class="ml-2 block text-sm text-gray-700">登录时启用验证码</span>
                  </label>
                  
                  <label class="flex items-center">
                    <input
                      v-model="settings.security.login.enableTwoFactor"
                      type="checkbox"
                      class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                    >
                    <span class="ml-2 block text-sm text-gray-700">启用双因素认证</span>
                  </label>
                </div>
              </div>
            </div>
            
            <div class="mt-8 flex justify-end">
              <button
                type="button"
                class="mr-3 px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                @click="resetSettings('security')"
              >
                重置
              </button>
              <button
                type="submit"
                class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
              >
                保存设置
              </button>
            </div>
          </form>
        </div>
        
        <!-- 通知设置 -->
        <div v-if="activeTab === 'notifications'">
          <h2 class="text-lg font-semibold text-gray-900 mb-4">通知设置</h2>
          <p class="text-gray-500 mb-6">配置系统通知方式和通知触发条件</p>
          
          <form @submit.prevent="saveSettings('notifications')">
            <div class="space-y-6">
              <div>
                <h3 class="text-md font-medium text-gray-900 mb-3">通知渠道</h3>
                
                <div class="space-y-4">
                  <div class="p-4 border border-gray-200 rounded-lg">
                    <div class="flex items-start">
                      <div class="flex items-center h-5">
                        <input
                          v-model="settings.notifications.channels.email.enabled"
                          id="email-notification"
                          type="checkbox"
                          class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                        >
                      </div>
                      <div class="ml-3 text-sm">
                        <label for="email-notification" class="font-medium text-gray-700">邮件通知</label>
                        <p class="text-gray-500 mt-1">通过电子邮件发送系统通知</p>
                      </div>
                    </div>
                    
                    <div 
                      class="mt-4 pl-8 space-y-4"
                      v-if="settings.notifications.channels.email.enabled"
                    >
                      <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">SMTP 服务器</label>
                        <input
                          v-model="settings.notifications.channels.email.smtpServer"
                          type="text"
                          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                        >
                      </div>
                      
                      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                          <label class="block text-sm font-medium text-gray-700 mb-1">SMTP 端口</label>
                          <input
                            v-model.number="settings.notifications.channels.email.smtpPort"
                            type="number"
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                          >
                        </div>
                        
                        <div>
                          <label class="block text-sm font-medium text-gray-700 mb-1">加密方式</label>
                          <select
                            v-model="settings.notifications.channels.email.encryption"
                            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                          >
                            <option value="none">无</option>
                            <option value="tls">TLS</option>
                            <option value="ssl">SSL</option>
                          </select>
                        </div>
                      </div>
                      
                      <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">发件人邮箱</label>
                        <input
                          v-model="settings.notifications.channels.email.senderEmail"
                          type="email"
                          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                        >
                      </div>
                    </div>
                  </div>
                  
                  <div class="p-4 border border-gray-200 rounded-lg">
                    <div class="flex items-start">
                      <div class="flex items-center h-5">
                        <input
                          v-model="settings.notifications.channels.system.enabled"
                          id="system-notification"
                          type="checkbox"
                          class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                        >
                      </div>
                      <div class="ml-3 text-sm">
                        <label for="system-notification" class="font-medium text-gray-700">系统内通知</label>
                        <p class="text-gray-500 mt-1">在系统内部显示通知消息</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="pt-4 border-t border-gray-200">
                <h3 class="text-md font-medium text-gray-900 mb-3">通知触发条件</h3>
                
                <div class="space-y-3">
                  <label class="flex items-center">
                    <input
                      v-model="settings.notifications.triggers.userRegistration"
                      type="checkbox"
                      class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                    >
                    <span class="ml-2 block text-sm text-gray-700">用户注册时通知管理员</span>
                  </label>
                  
                  <label class="flex items-center">
                    <input
                      v-model="settings.notifications.triggers.passwordChange"
                      type="checkbox"
                      class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                    >
                    <span class="ml-2 block text-sm text-gray-700">用户密码更改时通知用户</span>
                  </label>
                  
                  <label class="flex items-center">
                    <input
                      v-model="settings.notifications.triggers.loginAlert"
                      type="checkbox"
                      class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                    >
                    <span class="ml-2 block text-sm text-gray-700">异地登录时通知用户</span>
                  </label>
                  
                  <label class="flex items-center">
                    <input
                      v-model="settings.notifications.triggers.systemUpdates"
                      type="checkbox"
                      class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                    >
                    <span class="ml-2 block text-sm text-gray-700">系统更新时通知所有管理员</span>
                  </label>
                </div>
              </div>
            </div>
            
            <div class="mt-8 flex justify-end">
              <button
                type="button"
                class="mr-3 px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                @click="resetSettings('notifications')"
              >
                重置
              </button>
              <button
                type="submit"
                class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
              >
                保存设置
              </button>
            </div>
          </form>
        </div>
        
        <!-- 备份设置 -->
        <div v-if="activeTab === 'backup'">
          <h2 class="text-lg font-semibold text-gray-900 mb-4">备份设置</h2>
          <p class="text-gray-500 mb-6">配置系统数据自动备份选项和备份存储位置</p>
          
          <form @submit.prevent="saveSettings('backup')">
            <div class="space-y-6">
              <div>
                <label class="flex items-center">
                  <input
                    v-model="settings.backup.autoBackup.enabled"
                    type="checkbox"
                    class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                  >
                  <span class="ml-2 block text-sm text-gray-700">启用自动备份</span>
                </label>
              </div>
              
              <div 
                class="space-y-6"
                v-if="settings.backup.autoBackup.enabled"
              >
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">备份频率</label>
                  <select
                    v-model="settings.backup.autoBackup.frequency"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                  >
                    <option value="daily">每天</option>
                    <option value="weekly">每周</option>
                    <option value="monthly">每月</option>
                  </select>
                </div>
                
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">备份时间</label>
                  <input
                    v-model="settings.backup.autoBackup.time"
                    type="time"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                  >
                  <p class="mt-1 text-xs text-gray-500">建议设置在系统负载较低的时间段</p>
                </div>
                
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">备份保留天数</label>
                  <input
                    v-model.number="settings.backup.autoBackup.retentionDays"
                    type="number"
                    min="1"
                    max="90"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                  >
                  <p class="mt-1 text-xs text-gray-500">超过保留天数的备份将自动删除</p>
                </div>
              </div>
              
              <div class="pt-4 border-t border-gray-200">
                <h3 class="text-md font-medium text-gray-900 mb-3">备份存储位置</h3>
                
                <div class="space-y-4">
                  <div class="p-4 border border-gray-200 rounded-lg">
                    <div class="flex items-start">
                      <div class="flex items-center h-5">
                        <input
                          v-model="settings.backup.storage.local.enabled"
                          id="local-storage"
                          type="radio"
                          name="storage"
                          value="true"
                          class="text-indigo-600 focus:ring-indigo-500 border-gray-300"
                        >
                      </div>
                      <div class="ml-3 text-sm">
                        <label for="local-storage" class="font-medium text-gray-700">本地存储</label>
                        <p class="text-gray-500 mt-1">备份文件存储在服务器本地</p>
                      </div>
                    </div>
                    
                    <div 
                      class="mt-4 pl-8"
                      v-if="settings.backup.storage.local.enabled"
                    >
                      <label class="block text-sm font-medium text-gray-700 mb-1">存储路径</label>
                      <input
                        v-model="settings.backup.storage.local.path"
                        type="text"
                        class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                      >
                    </div>
                  </div>
                  
                  <div class="p-4 border border-gray-200 rounded-lg">
                    <div class="flex items-start">
                      <div class="flex items-center h-5">
                        <input
                          v-model="settings.backup.storage.cloud.enabled"
                          id="cloud-storage"
                          type="radio"
                          name="storage"
                          value="true"
                          class="text-indigo-600 focus:ring-indigo-500 border-gray-300"
                        >
                      </div>
                      <div class="ml-3 text-sm">
                        <label for="cloud-storage" class="font-medium text-gray-700">云存储</label>
                        <p class="text-gray-500 mt-1">备份文件存储到云存储服务</p>
                      </div>
                    </div>
                    
                    <div 
                      class="mt-4 pl-8 space-y-4"
                      v-if="settings.backup.storage.cloud.enabled"
                    >
                      <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">云服务提供商</label>
                        <select
                          v-model="settings.backup.storage.cloud.provider"
                          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                        >
                          <option value="aws">Amazon S3</option>
                          <option value="azure">Microsoft Azure</option>
                          <option value="google">Google Cloud</option>
                        </select>
                      </div>
                      
                      <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">访问密钥</label>
                        <input
                          v-model="settings.backup.storage.cloud.accessKey"
                          type="text"
                          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                        >
                      </div>
                      
                      <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">密钥</label>
                        <input
                          v-model="settings.backup.storage.cloud.secretKey"
                          type="password"
                          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                        >
                      </div>
                      
                      <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">存储桶/容器名称</label>
                        <input
                          v-model="settings.backup.storage.cloud.bucket"
                          type="text"
                          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="pt-4 border-t border-gray-200">
                <button
                  type="button"
                  class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
                  @click="triggerManualBackup"
                >
                  <i class="fa fa-sync-alt mr-2"></i>
                  立即执行备份
                </button>
              </div>
            </div>
            
            <div class="mt-8 flex justify-end">
              <button
                type="button"
                class="mr-3 px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                @click="resetSettings('backup')"
              >
                重置
              </button>
              <button
                type="submit"
                class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
              >
                保存设置
              </button>
            </div>
          </form>
        </div>
        
        <!-- 日志设置 -->
        <div v-if="activeTab === 'logs'">
          <h2 class="text-lg font-semibold text-gray-900 mb-4">日志设置</h2>
          <p class="text-gray-500 mb-6">配置系统日志记录级别和日志保留策略</p>
          
          <form @submit.prevent="saveSettings('logs')">
            <div class="space-y-6">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">日志记录级别</label>
                <select
                  v-model="settings.logs.logLevel"
                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                >
                  <option value="debug">Debug (最详细，包含所有信息)</option>
                  <option value="info">Info (常规操作信息)</option>
                  <option value="warn">Warn (警告信息)</option>
                  <option value="error">Error (仅错误信息)</option>
                  <option value="fatal">Fatal (仅致命错误信息)</option>
                </select>
              </div>
              
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">日志保留天数</label>
                <input
                  v-model.number="settings.logs.retentionDays"
                  type="number"
                  min="1"
                  max="365"
                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                >
              </div>
              
              <div class="pt-4 border-t border-gray-200">
                <h3 class="text-md font-medium text-gray-900 mb-3">记录的事件类型</h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                  <label class="flex items-center">
                    <input
                      v-model="settings.logs.eventTypes.userActions"
                      type="checkbox"
                      class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                    >
                    <span class="ml-2 block text-sm text-gray-700">用户操作</span>
                  </label>
                  
                  <label class="flex items-center">
                    <input
                      v-model="settings.logs.eventTypes.systemEvents"
                      type="checkbox"
                      class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                    >
                    <span class="ml-2 block text-sm text-gray-700">系统事件</span>
                  </label>
                  
                  <label class="flex items-center">
                    <input
                      v-model="settings.logs.eventTypes.errors"
                      type="checkbox"
                      class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                    >
                    <span class="ml-2 block text-sm text-gray-700">错误信息</span>
                  </label>
                  
                  <label class="flex items-center">
                    <input
                      v-model="settings.logs.eventTypes.securityEvents"
                      type="checkbox"
                      class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                    >
                    <span class="ml-2 block text-sm text-gray-700">安全事件</span>
                  </label>
                  
                  <label class="flex items-center">
                    <input
                      v-model="settings.logs.eventTypes.apiRequests"
                      type="checkbox"
                      class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                    >
                    <span class="ml-2 block text-sm text-gray-700">API 请求</span>
                  </label>
                  
                  <label class="flex items-center">
                    <input
                      v-model="settings.logs.eventTypes.performance"
                      type="checkbox"
                      class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                    >
                    <span class="ml-2 block text-sm text-gray-700">性能数据</span>
                  </label>
                </div>
              </div>
              
              <div class="pt-4 border-t border-gray-200">
                <h3 class="text-md font-medium text-gray-900 mb-3">日志存储方式</h3>
                
                <div class="space-y-3">
                  <label class="flex items-center">
                    <input
                      v-model="settings.logs.storage.file"
                      type="checkbox"
                      class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                    >
                    <span class="ml-2 block text-sm text-gray-700">文件存储</span>
                  </label>
                  
                  <label class="flex items-center">
                    <input
                      v-model="settings.logs.storage.database"
                      type="checkbox"
                      class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                    >
                    <span class="ml-2 block text-sm text-gray-700">数据库存储</span>
                  </label>
                  
                  <label class="flex items-center">
                    <input
                      v-model="settings.logs.storage.externalService"
                      type="checkbox"
                      class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                    >
                    <span class="ml-2 block text-sm text-gray-700">外部日志服务</span>
                  </label>
                </div>
              </div>
              
              <div class="pt-4 border-t border-gray-200">
                <button
                  type="button"
                  class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                  @click="viewLogs"
                >
                  <i class="fa fa-list-alt mr-2"></i>
                  查看系统日志
                </button>
              </div>
            </div>
            
            <div class="mt-8 flex justify-end">
              <button
                type="button"
                class="mr-3 px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                @click="resetSettings('logs')"
              >
                重置
              </button>
              <button
                type="submit"
                class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
              >
                保存设置
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
    
    <!-- 保存成功提示 -->
    <div 
      v-if="showSuccessToast"
      class="fixed bottom-4 right-4 bg-green-500 text-white px-4 py-3 rounded-lg shadow-lg flex items-center z-50 animate-fade-in"
    >
      <i class="fa fa-check-circle mr-2"></i>
      <span>设置已成功保存</span>
    </div>
    
    <!-- 备份进行中提示 -->
    <div 
      v-if="showBackupProgress"
      class="fixed bottom-4 right-4 bg-blue-500 text-white px-4 py-3 rounded-lg shadow-lg flex items-center z-50 animate-fade-in"
    >
      <i class="fa fa-spinner fa-spin mr-2"></i>
      <span>备份正在进行中，请稍候...</span>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, reactive } from 'vue';
import { useSystemStore } from '@/stores/systemStore';
import { showToast } from '@/utils/toast';

export default {
  setup() {
    // 状态管理
    const systemStore = useSystemStore();
    
    // 选项卡配置
    const tabs = [
      { id: 'basic', name: '基本设置', icon: 'fas fa-cog' },
      { id: 'security', name: '安全设置', icon: 'fas fa-shield-alt' },
      { id: 'notifications', name: '通知设置', icon: 'fas fa-bell' },
      { id: 'backup', name: '备份设置', icon: 'fas fa-database' },
      { id: 'logs', name: '日志设置', icon: 'fas fa-file-alt' }
    ];
    
    // 状态变量
    const activeTab = ref('basic');
    const showSuccessToast = ref(false);
    const showBackupProgress = ref(false);
    const originalSettings = ref({});
    
    // 设置数据
    const settings = reactive({
      basic: {
        systemName: '',
        version: '',
        description: '',
        defaultLanguage: 'zh-CN',
        dateFormat: 'YYYY-MM-DD',
        showWelcomeMessage: true
      },
      security: {
        passwordPolicy: {
          minLength: 8,
          expireDays: 90,
          requireUppercase: true,
          requireLowercase: true,
          requireNumber: true,
          requireSpecialChar: false
        },
        login: {
          maxFailedAttempts: 5,
          lockoutMinutes: 15,
          enableCaptcha: true,
          enableTwoFactor: false
        }
      },
      notifications: {
        channels: {
          email: {
            enabled: true,
            smtpServer: '',
            smtpPort: 587,
            encryption: 'tls',
            senderEmail: ''
          },
          system: {
            enabled: true
          }
        },
        triggers: {
          userRegistration: true,
          passwordChange: true,
          loginAlert: true,
          systemUpdates: true
        }
      },
      backup: {
        autoBackup: {
          enabled: true,
          frequency: 'daily',
          time: '02:00',
          retentionDays: 30
        },
        storage: {
          local: {
            enabled: true,
            path: '/var/backups/'
          },
          cloud: {
            enabled: false,
            provider: 'aws',
            accessKey: '',
            secretKey: '',
            bucket: ''
          }
        }
      },
      logs: {
        logLevel: 'info',
        retentionDays: 30,
        eventTypes: {
          userActions: true,
          systemEvents: true,
          errors: true,
          securityEvents: true,
          apiRequests: false,
          performance: false
        },
        storage: {
          file: true,
          database: false,
          externalService: false
        }
      }
    });
    
    // 获取系统设置
    const fetchSystemSettings = async () => {
      try {
        const data = await systemStore.getSystemSettings();
        // 合并获取到的设置与默认设置
        Object.assign(settings, data);
        // 保存原始设置用于重置功能
        originalSettings.value = JSON.parse(JSON.stringify(settings));
      } catch (error) {
        console.error('获取系统设置失败:', error);
        showToast('获取系统设置失败', 'error');
      }
    };
    
    // 保存设置
    const saveSettings = async (tab) => {
      try {
        await systemStore.saveSystemSettings(settings);
        // 显示成功提示
        showSuccessToast.value = true;
        setTimeout(() => {
          showSuccessToast.value = false;
        }, 3000);
        // 更新原始设置
        originalSettings.value = JSON.parse(JSON.stringify(settings));
      } catch (error) {
        console.error('保存系统设置失败:', error);
        showToast('保存系统设置失败', 'error');
      }
    };
    
    // 重置设置
    const resetSettings = (tab) => {
      if (originalSettings.value && originalSettings.value[tab]) {
        Object.assign(settings[tab], originalSettings.value[tab]);
      }
    };
    
    // 手动触发备份
    const triggerManualBackup = async () => {
      try {
        showBackupProgress.value = true;
        await systemStore.triggerManualBackup();
        showBackupProgress.value = false;
        showToast('备份已成功完成', 'success');
      } catch (error) {
        console.error('手动备份失败:', error);
        showBackupProgress.value = false;
        showToast('备份失败，请稍后重试', 'error');
      }
    };
    
    // 查看日志
    const viewLogs = () => {
      // 这里可以导航到日志查看页面
      console.log('导航到日志查看页面');
      // 示例: router.push('/system/logs');
    };
    
    // 页面加载时获取设置
    onMounted(() => {
      fetchSystemSettings();
    });
    
    return {
      tabs,
      activeTab,
      settings,
      showSuccessToast,
      showBackupProgress,
      saveSettings,
      resetSettings,
      triggerManualBackup,
      viewLogs
    };
  }
};
</script>

<style scoped>
.system-settings-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 动画效果 */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out forwards;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .system-settings-container {
    padding: 10px;
  }
  
  .page-header h1 {
    font-size: 1.5rem;
  }
  
  .grid-cols-1 md:grid-cols-2 {
    grid-template-columns: 1fr;
  }
  
  nav.flex {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  nav.flex button {
    white-space: nowrap;
  }
}
</style>
    